<template>
	<view class="pinglun">
		<view class="uni-padding-wrap">
			<view class='pinglun_title' v-if="showTitle"><text>直播互动区</text></view>
			<!-- 评论区 start -->
			<scroll-view scroll-with-animation="true" :scroll-top="scrollTop" scroll-y="true" class="uni-comment-wrap" @scroll="scroll">
				<view class="uni-comment">
					<view class="uni-comment-list" v-for="(item,index) in comments" :key="index">
						<view class="uni-comment-face"><image :src="item.userInfo.avatar" mode="aspectFill"></image></view>
						<view class="uni-comment-body">
							<view class="uni-comment-top">
								<text>{{item.userInfo.name || '游客'}}</text><text class='chatTtime'>{{' '+item.time}}</text>
							</view>
							<view class="uni-comment-date">
								<text>{{item.text}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 评论区 end -->
		</view>
		
		<view class='active btm2'>
			<view class="input_wrap">
				<input type="text" :focus="focus" v-model="calue"/>
			</view>
			
			<text @tap="send">发送</text>
		</view>
	</view>
</template>

<script>
	import {
		commentcontent,
		commentContentLike,
		commentContentFavorite,
		setCommentContent,
		commentLike,
		getUsersample
	} from '@/utils/api'
	import moment from '../utils/moment.js'
	const userInfo = uni.getStorageSync("userInfo");
	// #ifdef APP-PLUS
		const rongIm = uni.requireNativePlugin('GZF-RongIM');
	// #endif
	export default {
		name: 'livechat',
		props: {
			ids: {
				type: String
			},
			title: {
				type: Boolean
			},
			getScrollTop: {
				type: Number
			},
			contents:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		data() {
			return {
				id:this.ids,
				content:this.contents,
				focus:false,
				calue:'' ,//评论输入框内容
				showTitle:true,
				hasMore:true,
				hasChat:false,
				comments:[], //聊天内容
				old: {
					scrollTop: 0
				},
				scrollTop: 10000,
			};
		},
		methods:{
			scroll: function(e) {
				// console.log(e)
				// this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.scrollTop+1
			},
			//发送聊天室消息
			async send(){
				if(!this.calue || !this.hasChat)return;
				var that = this
				// #ifdef APP-PLUS
				
				if(this.hasChat && rongIm){
					rongIm.sendMessage(JSON.stringify({
						roomId:this.content.id,
						message:this.calue,
					}),
						result => {
							that.comments.push({
								userInfo:{
									avatar:uni.getStorageSync("userInfo").avatar,
									name:uni.getStorageSync("userInfo").name
								},
								text:that.calue,
								time:moment().format('HH:mm:ss')
							})
							that.goTop()
							that.calue = ''
							that.focus = false
						});
				}
				// #endif
				
			},
			ScrollTo(){
				uni.pageScrollTo({
					duration:400,
					scrollTop:this.plTop
				})
			},
		}, 
		async mounted(){	
			// console.log(userInfo,'---------2222-------')
		},
		beforeDestroy(){
			// #ifdef APP-PLUS
			if(this.hasChat && rongIm){
				rongIm.quitChatRoom (JSON.stringify({roomId:this.content.id}),
					result => {
						// uni.showLoading({ title: '==退出=:'+result })
						// setTimeout(()=>{
						// 	uni.hideLoading(result);
						// },2000)	
					});
			}
			// #endif
		},

		watch:{
			ids(v){
				this.id = v
			},
			contents(v){
				this.content = v
				// #ifdef APP-PLUS
				if(v.id && !this.hasChat && rongIm){
					this.hasChat = true
					var that = this
					rongIm.joinChatRoom(JSON.stringify({roomId:v.id}),
						result => {
							rongIm.getChatRoomMsg(JSON.stringify({
								roomId:v.id,
							}),
								async res => {
									let storeUser = this.$store.state.userInfo;
									let result = JSON.parse(res);
									if(!storeUser[result.senderUserId]){
										let userData = await getUsersample(result.senderUserId)
										if(userData.status == 0){
											this.$store.commit('changeUserInfo',{
												id:result.senderUserId,
												user:userData.data
											})
										}
									}

									if(!result || !result.content){
										return;
									}

									let content = result.content.content || ''
					
									that.comments.push({
										userInfo:storeUser[result.senderUserId],
										text:content,
										time:moment(result.sentTime).format('HH:mm:ss')
									})
									that.goTop()
								});
						});
				}
				// #endif
			},
			title(v){
				this.showTitle = v
			}
		}
	}
</script>

<style lang="scss">
	.wrap1{
		word-break: break-all;
	}
	.uni-comment-face{
		image{
			width: 74upx;
			height: 74upx;
			border-radius: 50%;
		}
	}
	.pinglun{
		border-top: 1px solid #F4F4F4;
		.uni-comment-face{
			image{
				width: 74upx;
				height: 74upx;
				border-radius: 50%;
			}
		}
		.uni-comment-wrap{
			height: 400upx;
			overflow: auto;
		}
		.pinglun_title{
			margin:40upx 0 10upx;
			text{
				color:#333;
				line-height: 1;
				margin:0;padding:0;
				border-left: 5upx solid #333;
				padding-left:40upx;
			}
		}
		.uni-comment-top{
			margin-top: -4upx;
			display:flex;
			justify-content:space-between;
			text{
				font-size:28upx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(51,51,51,1);
				margin-bottom: 10upx;
			}
			.chatTtime{
				color: #999;
				font-size: 26upx;
			}
			image{
				width: 29upx;
				height: 26upx;
				margin-left: 4upx;
				margin-top: 4upx;
			}
		} 
		.uni-comment-date{
			position:relative;
			top:-12upx;
			text{
				word-break: break-all;
				font-size:24upx;
				font-family:PingFang SC;
				font-weight:400;
				color:#333;
			}
		} 
		.uni-comment-content{
			font-size:28upx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(51,51,51,1);
		}
		.reply{
			font-size:20upx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(153,153,153,1);
			margin-top:10upx;
			.back{
				color: #AD85FC;
				margin-left: 36upx;
			}
		}
		.reply_content{
			background:rgba(244,244,244,1);
			border-radius:10upx;
			padding: 10upx 18upx;
			text{
				font-size:20upx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(51,51,51,1);
				line-height: 1;
			}
			.myview{
				margin-bottom:-10upx;
			}
			.reply_time{
				font-size:20upx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(153,153,153,1);
				margin-left: 30upx;
			}
		}
		.btm{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left:30upx;
			padding-right:30upx;
			position:fixed;
			width: 690upx;
			bottom:0;
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			background:#fff;
			border-top:1px solid rgba(179,138,221,0.24);
			height: 100upx;
			.item{
				display: flex;
				align-items: center;
				justify-content: center;
				text{
					font-size:28upx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(51,51,51,1);
					line-height:36upx;
				}
			}
			.input{
				width:267upx;
				height:44upx;
				background:rgba(244,244,244,1);
				border-radius:7upx;
				padding-left: 14upx;
			}
			.item-zan{
				margin-top: -8upx;
			}
			image{
				width: 40upx;
				margin-right: 10upx;
			}
		}
		.btm2{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left:30upx;
			padding-right:30upx;
			position:fixed;
			bottom:0;
			width: 290upx;
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			background:#fff;
			border-top:1px solid rgba(179,138,221,0.24);
			height: 100upx;
			.input_wrap{
				width: 532upx;
				height:60upx;
				background:rgba(244,244,244,1);
				border-radius:7upx;
				padding-left: 14upx;
				position: relative;
				input{
					bottom: -25rpx;
					width: 520upx;
					position: absolute;
					height: 100upx;
					line-height: 5rpx!important;
					padding: 0rpx 0rpx 10rpx;
					box-sizing: border-box;
				}
			}
			text{
				width: 133upx;
				line-height: 60upx;
				font-size:30upx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(255,255,255,1);
				background: #B998FA;
				border-radius: 10upx;
				text-align: center;
			}
		}
		.btm2.active{
			width: 690upx;
		}
		.nomore{
			text-align: center;
			text{
				line-height: 120upx;
				color: #333;
			}
		}
	}
</style>
